<template>
<div class="aside">
  <div>
    <el-row class="topCity" type="flex" justify="space-between">
        <el-col>{{ data.dep_date }}</el-col>
        <el-col>
            <el-row type="flex" justify="end">
                {{ data.org_city_name }} - {{ data.dst_city_name }}
            </el-row>
        </el-col>
    </el-row>
    <el-row type="flex" justify="space-between">
        <el-col>
            <div class="time">{{ data.dep_time }}</div>
            <div class="txt">{{data.org_airport_name}}{{ data.org_airport_quay }}</div>
        </el-col>
        <el-col>
            <!-- 飞行时间需要自己计算 -->
            <div class="txt"> -- 2时20分 --</div>
            <div class="txt">{{data.airline_name}}{{data.flight_no}}</div>
        </el-col>
        <el-col>
            <el-row type="flex" justify="end" style="flex-direction: column;text-align:center;">
                <div class="time">{{ data.arr_time }}</div>
                <div class="txt">{{data.dst_airport_name}}{{ data.dst_airport_quay }}</div>
            </el-row>
        </el-col>
    </el-row>
  </div>
  <el-row style="line-height: 3;" type="flex" justify="space-between">
    <el-col> 订单总价</el-col>
    <el-col> 金额</el-col>
    <el-col> 
        <el-row type="flex" justify="end">
            数量
        </el-row>
    </el-col>
  </el-row>
  <el-row style="line-height: 3;" type="flex" justify="space-between">
    <el-col> 成人机票</el-col>
    <el-col> ￥{{ data.seat_infos.org_settle_price }}</el-col>
    <el-col> 
        <el-row type="flex" justify="end">
            x1
        </el-row>
    </el-col>
  </el-row>
  <el-row style="line-height: 3;" type="flex" justify="space-between">
    <el-col> 机建+燃油</el-col>
    <el-col> ￥{{data.airport_tax_audlet}}/人/单程</el-col>
    <el-col> 
        <el-row type="flex" justify="end">
            x1
        </el-row>
    </el-col>
  </el-row>
  <el-row style="line-height: 3;" type="flex" justify="space-between" align="middle">
    <el-col> 应付总额：</el-col>
    <el-col> 
        <el-row class="money" type="flex" justify="end">
            ￥ {{allPrice}}
        </el-row>
    </el-col>
  </el-row>
</div>
</template>
<script>
export default {
    props: {
        data:{
            type: Object,
            default: ()=>({})
        },
        allPrice: {
         // 传入的值可以是字符串也可以是数字
            type: [Number,String],
            default: 0
        }
    }
}
</script>
<style lang="less" scoped>
.aside{
    padding: 10px;
    .topCity{
        margin-bottom: 20px;
    }
    .txt{
        color: #9ca3af;
    }
    .time{
        font-size: 22px;
    }
    .money{
        color: #ffa500;
        font-size: 30px;
    }
}
</style>